<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<script type="text/javascript">
	$(document).ready(function() {
		var table = $('#listPools').DataTable({
			"bInfo": false,
			"bServerSide" : false,
			"sAjaxSource" : "listJSON",
			"aoColumns" : [ {
				"mData":   null,
                "mRender": function ( data, type, row ) {
                		return '<div align="center"><input type="checkbox" class="select_checkbox"></div>';
                },
                "width": "1%",
                "bSortable": false
 			},{
				"mData" : null,
				"width": "10%",
				"mRender" : function(name, type, row){
					return '<a href="../pool/detail/'+row.questionPoolId+'">Detail</a>';
				}
			}, {
				"mData" : "questionPoolId",
				"sTitle" : "Id",
				"width": "5%",
				"visible": false
			}, {
				"mData" : "questionPoolName",
				"width": "10%",
				"mRender" : function(name, type, row){
					return '<a href="../pool/info/'+row.questionPoolId+'">'+name+'</a>';
				}
			}, {
				"mData" : "description",
				"width": "50%"
			} ]
		});
		
		$('table tbody').on( 'click', 'tr', function () {
	        $(this).toggleClass('selected');
	        var checked = $(this).children().children().children(".select_checkbox");
	        try{
	        	checked.prop("checked", !checked.prop("checked"));
	        }catch(e){
	        	alert(e);
	        }
	    } );
		
		$('#delete').click( function () {
			try{
				var names = table.cells('.selected', 1).data();
				var listName = "";
				for(var i = 0; i < names.length; i++){
					names[i] = names[i] + ";"
					listName = listName + names[i];
				}
				alert(listName);
				$.ajax({
					   url: 'delete',
					   type: "POST",
					   contentType: 'application/json',
					   mimeType: 'application/json',
					   data: listName,
					   error:function(data,status,er) { 
					        alert("error: "+data+" status: "+status+" er:"+er);
					    },
					   dataType: 'text',
					   success: function(data) {
					      alert(data);
					   },
					});
			}
			catch(ex){
				alert(ex);
			}
	    } );
	});
</script>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>${subject.subjectName}: Pool List</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="add" class="btn btn-primary btn-sm">New Pool</a>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
			<table id="listPools" class="hover table table-striped table-bordered"
				cellspacing="0" style="width: 100%;">
				<thead>
					<tr>
						<th></th>
						<th>Detail</th>
						<th>Id</th>
						<th>Name</th>
						<th>Description</th>
					</tr>
				</thead>
			</table>
		</div>

	</div>
</div>

